<template>
  <div>
    <!-- 上半部分信息 -->
    <Card>
      <div>
        <Tabs type="card" @on-click="changeTab">
          <div v-for="(item, index) in tabList" :key="index">
            <TabPane
              v-if="assignmentInfo.insuranceType!=='problem'"
              :label="'保单：'+item.contno"
              :name="index"
            ></TabPane>
            <TabPane
              v-else
              :label="'问题件编号：'+item.problemFileId+kg+'保单：'+item.contno"
              :name="index"
            ></TabPane>
          </div>
        </Tabs>
      </div>
      <!-- 保单信息-->
      <div v-if="assignmentInfo.insuranceType==='assign'">
        <Row class="assignment-header">
          <i-col span="6">
            <span>计划编号：</span>
            <span>{{assignmentInfo.row.planid}}</span>
          </i-col>
          <i-col span="6">
            <span class="conLabel">保单：</span>
            <span class="conInfo" v-if="assignmentInfo.row.contno">{{assignmentInfo.row.contno}}</span>
          </i-col>
          <i-col span="6">
            <span class="conLabel">备注：</span>
            <span class="conInfo" v-if="assignmentInfo.row.remark">{{assignmentInfo.row.remark}}</span>
          </i-col>
        </Row>
      </div>
      <span class="baseInfo">
        <span v-if="payWay && assignmentInfo.insuranceType!=='problem'">
          <Row v-if="assignmentInfo.insuranceType != 'noplan'">
            <i-col span="10">
              <div class="title">续期专员信息</div>
            </i-col>
          </Row>
          <Row v-if="assignmentInfo.insuranceType != 'noplan'">
            <i-col span="6">
              <span class="conLabel">续期专员：</span>
              <span class="conInfo" v-if="basicInformation1">{{basicInformation1.name?basicInformation1.name+'-':''}}{{basicInformation1.reagentcode?basicInformation1.reagentcode:''}}</span>
            </i-col>
            <i-col span="10">
              <span class="conLabel">所属机构：</span>
              <span class="conInfo" v-if="basicInformation1">{{basicInformation1.managecomname?basicInformation1.managecomname+' - ':''}}{{basicInformation1.managecom?basicInformation1.managecom:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">联系电话：</span>
              <span class="conInfo" v-if="basicInformation1">{{basicInformation1.mobile?basicInformation1.mobile:''}}</span>
            </i-col>
          </Row>
        </span>
        <span v-if="row.contno != ''">
          <Row v-if="assignmentInfo.insuranceType != 'noplan'">
            <i-col span="2">
              <div class="title">业务员信息</div>
            </i-col>
            <Button
              v-if="basicInformation.agentdetail"
              :type="basicInformation.agentdetail.agentstate==='01' ? 'success':basicInformation.agentdetail.agentstate==='02'?'success':'error'"
              size="small"
              style="border-radius:12px;padding-left:20px;padding-right:20px;font-size:12px;height:20px"
            >{{basicInformation.agentdetail.agentstate==='01' ? '在职':basicInformation.agentdetail.agentstate==='02'?'在职':'离职'}}</Button>
          </Row>
          <Row v-if="assignmentInfo.insuranceType != 'noplan'">
            <i-col span="6">
              <span class="conLabel">业务员：</span>
              <span class="conInfo" v-if="assignmentInfo.insuranceType=='problem'">
                {{basicInformation.agentdetail && basicInformation.agentdetail.agentName?basicInformation.agentdetail.agentName+' - ':''}}
                {{basicInformation.agentdetail && basicInformation.agentdetail.agentCode?basicInformation.agentdetail.agentCode:''}}
              </span>
              <span class="conInfo" v-else>
                {{basicInformation.agentdetail && basicInformation.agentdetail.name?basicInformation.agentdetail.name+' - ':''}}
                {{basicInformation.agentdetail && basicInformation.agentdetail.agentcode?basicInformation.agentdetail.agentcode:''}}
              </span>
            </i-col>
            <i-col span="10">
              <span class="conLabel">所属机构：</span>
              <span class="conInfo">
                {{basicInformation.agentdetail && basicInformation.agentdetail.managecomname?basicInformation.agentdetail.managecomname+' - ':''}}
                {{basicInformation.agentdetail && basicInformation.agentdetail.managecom?basicInformation.agentdetail.managecom:''}}
              </span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">联系电话：</span>
              <span class="conInfo" v-if="basicInformation.agentdetail">{{basicInformation.agentdetail.mobile?basicInformation.agentdetail.mobile:''}}</span>
            </i-col>
          </Row>
          <div class="title">保单信息
            <Tooltip placement="right" theme="light" v-if="basicInformation.customerdetail && (basicInformation.customerdetail.appntvalid || basicInformation.customerdetail.insuerdvalid || basicInformation.customerdetail.beneficiary)">
              <Icon type="ios-alert-outline" color="#ff9900" size="18" />
              <div slot="content">
                <span v-if="basicInformation.customerdetail.appntvalid">{{basicInformation.customerdetail.appntvalid?'投保人':''}}{{basicInformation.customerdetail.insuerdvalid || basicInformation.customerdetail.beneficiary?'、':''}}</span>
                <span v-if="basicInformation.customerdetail.insuerdvalid">{{basicInformation.customerdetail.insuerdvalid?'被保人':''}}{{basicInformation.customerdetail.beneficiary?'、':''}}</span>
                <span v-if="basicInformation.customerdetail.beneficiary">{{basicInformation.customerdetail.beneficiary?'受益人':''}}</span>证件有效期已过期！
              </div>
            </Tooltip>
          </div>
          <Row>
            <i-col span="6">
              <span class="conLabel">保单号：</span>
              <span class="conInfo">{{contno}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel" v-if="assignmentInfo.insuranceType == 'invalid'">应交次数：</span>
              <span class="conLabel" v-else>已交次数：</span>
              <span class="conInfo">
                {{basicInformation.contdetail?basicInformation.contdetail.payyear+"/":''}}
                {{basicInformation.contdetail?basicInformation.contdetail.payyears:''}}
                {{basicInformation.contdetail?basicInformation.contdetail.payintvname:''}}
              </span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">应交日：</span>
              <span class="conInfo">{{basicInformation.contdetail?basicInformation.contdetail.paytodate:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">应交保费：</span>
              <span class="conInfo">
                {{basicInformation.contdetail?basicInformation.contdetail.paymoney:''}}元
                <Tooltip placement="right" v-show="basicInformation.contdetail && (basicInformation.contdetail.lastmainmoney+basicInformation.contdetail.lastsubmoney)!=basicInformation.contdetail.paymoney">
                  <Icon type="ios-help-circle-outline" style="color:#000" />
                  <div slot="content">
                    <!-- {{basicInformation.contdetail.lastmainmoney+basicInformation.contdetail.totalsubpolmoney}} -->
                    <div class="tooltipContent">上期主险保费：{{basicInformation.contdetail?basicInformation.contdetail.lastmainmoney:''}}元</div>
                    <div class="tooltipContent">上期附加险保费：{{basicInformation.contdetail?basicInformation.contdetail.lastsubmoney:''}}元</div>
                  </div>
                </Tooltip>
              </span>
            </i-col>
          </Row>
          <Row>
            <i-col span="6">
              <span class="conLabel">主险：</span>
              <span class="conInfo">{{basicInformation.contdetail?basicInformation.contdetail.mainriskname:''}}</span>
              <Icon v-if="basicInformation.contdetail && basicInformation.contdetail.mainriskList && basicInformation.contdetail.mainriskList.length>0" type="ios-information-circle-outline" @click="riskinfoModalShow(basicInformation.contdetail.mainriskList)" />
            </i-col>
            <i-col span="6">
              <span class="conLabel">主险保费：</span>
              <span class="conInfo">{{basicInformation.contdetail?basicInformation.contdetail.mainpolpaymoney:''}}元</span>
            </i-col>
            <i-col span="6" class="risk">
              <span class="conLabel">附险：</span>
              <span class="conInfo subRisk" v-if="basicInformation.contdetail">
                <div v-for="(item,index) in basicInformation.contdetail.subpol" :key="index">
                  {{item.riskname?item.riskname:''}}{{item.subprem === '' ||item.subprem === null ?'':item.subprem+'元'}}
                  <br />
                </div>
              </span>
              <span class="conInfo subRisk" v-else></span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">附险保费：</span>
              <span class="conInfo">{{basicInformation.contdetail?basicInformation.contdetail.totalsubpolmoney:''}}元</span>
            </i-col>
          </Row>
          <Row>
            <i-col span="6">
              <span class="conLabel">保单标志：</span>
              <span class="conInfo">{{basicInformation.contdetail?basicInformation.contdetail.contflagname:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">扣款失败原因：</span>
              <span class="conInfo">{{basicInformation.contdetail?basicInformation.contdetail.banksuccflagname:''}}</span>
            </i-col>
          </Row>
          <div class="title">投/被保人信息</div>
          <Row>
            <i-col span="6">
              <span class="conLabel">投保人：</span>
              <span class="conInfo">
                {{basicInformation.customerdetail?basicInformation.customerdetail.appntname:''}}
                <Tooltip placement="right">
                  <Icon type="ios-help-circle-outline" style="color:#000" />
                  <div slot="content" v-if="basicInformation.customerdetail">
                    <div class="tooltipContent" v-for="(item,index) in basicInformation.customerdetail.customerprotrayal" :key="index">{{item}}</div>
                  </div>
                  <div slot="content" v-else></div>
                </Tooltip>
              </span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">投保人性别：</span>
              <span class="conInfo">{{basicInformation.customerdetail?basicInformation.customerdetail.appntsexname:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">投保人出生日期：</span>
              <span class="conInfo">{{(basicInformation.customerdetail? basicInformation.customerdetail.appntbirthday : '')| filterdate}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">投保人电话：</span>
              <span class="conInfo">{{basicInformation.customerdetail? basicInformation.customerdetail.appntphone : ''}}</span>
            </i-col>
          </Row>
          <Row>
            <i-col span="6">
              <span class="conLabel">被保人：</span>
              <span class="conInfo">{{basicInformation.customerdetail?basicInformation.customerdetail.insuredname:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">被保人性别：</span>
              <span class="conInfo">{{basicInformation.customerdetail?basicInformation.customerdetail.insuredsexname:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">关系：</span>
              <span class="conInfo">{{basicInformation.customerdetail?basicInformation.customerdetail.relation:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">被保人出生日期：</span>
              <span class="conInfo">{{(basicInformation.customerdetail ? basicInformation.customerdetail.insuredbirthday : '') | filterdate}}</span>
            </i-col>
          </Row>
          <Row>
            <i-col span="6">
              <span class="conLabel">被保人电话：</span>
              <span class="conInfo">{{basicInformation.customerdetail ? basicInformation.customerdetail.insuredphone : ''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">联系地址：</span>
              <span class="conInfo">{{basicInformation.customerdetail ? basicInformation.customerdetail.appntpostaladdress:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">银行：</span>
              <span class="conInfo">{{basicInformation.customerdetail ?basicInformation.customerdetail.bankname:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">银行卡号：</span>
              <!-- 银行卡号倒数第5-8位显示为“*”号 -->
              <span class="conInfo">{{basicInformation.customerdetail ?basicInformation.customerdetail.bankaccno:''}}</span>
            </i-col>
          </Row>
        </span>
      </span>
    </Card>
    <!-- 服务记录 -->
    <Card style="margin-top:20px" v-if="payWay && assignmentInfo.insuranceType!=='problem'">
      <div>服务记录</div>
      <Divider></Divider>
      <div v-if="serviceRecord || serviceRecord1">
        <div v-if="serviceRecord1">
          <Timeline v-for="(serviceRecord2,index) in serviceRecord1" :key="index">
            <TimelineItem v-for="(item,index) in serviceRecord2" :key="index">
              <div class="modalTitle">
                <Row gutter="10">
                  <i-col span="6">
                    <span>工作日期：</span>
                    <span>{{item.updateTime?item.updateTime:''}}</span>
                  </i-col>
                  <i-col span="5">
                    <span class="conLabel" v-if="assignmentInfo.insuranceType == 'invalid' && !item.infoType">应交次数：</span>
                    <span class="conLabel" v-else-if="item.infoType">交费期次：</span>
                    <span class="conLabel" v-else>已交次数：</span>
                    <span class="gray">{{item.payyear?item.payyear+"/":''}}{{item.payyears?item.payyears:''}}{{item.payintv?item.payintv:''}}</span>
                  </i-col>
                  <i-col span="5">
                    <span>工作方式：</span>
                    <span class="gray">{{item.worktype?item.worktype:''}}</span>
                  </i-col>
                </Row>
              </div>
              <div class="modalContent modalContent-self" v-if="!item.infoType">
                <Row gutter="5">
                  <i-col span="4">
                    <span>处理人：</span>
                    <span>{{item.workname?item.workname:''}}</span>
                    <Button type="default" size="small" class="waiqin">
                      <span style="font-size:12px">{{item.role}}</span>
                    </Button>
                  </i-col>
                  <i-col span="4">
                    <span>收费状态预估：</span>
                    <span class="gray">{{item.estimatestate==='0'?'可回收':item.estimatestate==='1'?'收费困难':item.estimatestate==='2'?'不可回收':''}}</span>
                  </i-col>
                  <i-col span="4">
                    <span>预估交费难度：</span>
                    <span class="gray">{{item.difficulty?item.difficulty+'级':''}}</span>
                  </i-col>
                  <i-col span="4">
                    <span>交费时间预估：</span>
                    <!-- <span class="gray" v-if="item.estimatedate">{{item.estimatedate.substr(0,10)}}</span> -->
                    <span class="gray">{{item.estimatedate?item.estimatedate.substr(0,10):''}}</span>
                  </i-col>
                  <i-col span="4">
                    <span>是否联系成功：</span>
                    <span class="gray">{{item.linksuccessflag==="0"?'是':'否'}}</span>
                  </i-col>
                  <i-col span="4">
                    <span>主管陪访：</span>
                    <span class="gray">{{item.orderwith?item.orderwith:'否'}}</span>
                  </i-col>
                </Row>
                <div class="reasonDetail">
                  <span>未收原因说明</span>
                  <span v-for="(t2,index) in item.reasonByCompany" :key="index">
                    <Button size="small" class="reasonBtn">{{t2}}</Button>
                  </span>
                  <span v-for="(t3,index) in item.reasonByCustomer" :key="index">
                    <Button size="small" class="reasonBtn">{{t3}}</Button>
                  </span>
                  <span v-if="item.reasonByother">
                    <Button size="small" class="reasonBtn">{{item.reasonByother}}</Button>
                  </span>
                </div>
                <div class="reasonDetail">
                  <span>工作结果记录</span>
                  <span v-for="(t2,index) in item.workresultid" :key="index">
                    <Button size="small" class="reasonBtn">{{t2}}</Button>
                  </span>
                  <!-- <span v-if="item.workresultid">
                    <Button size="small" class="reasonBtn">{{item.workresultid}}</Button>
                  </span>-->
                </div>
                <div class="reasonDetail">
                  <!-- <span class="gray" v-if="item.linksuccessflag =='0'">{{item.workresult}}</span> -->
                  <span class="gray">{{item.workresult}}</span>
                </div>
                <div class="reasonDetail">
                  <span>实时扣款：{{item.paystate}}</span>
                </div>
                <div class="reasonDetail">
                  <Button v-if="item.recordingaddress" type="success" size="small" class="waiqin" @click="phoneRecordShow(item)">电话录音</Button>
                  <Modal footer-hide="true" :value="phoneRecord" :mask-closable="false" :closable="false" width="600" :styles="{top: '200px'}">
                    <span slot="header" style="color:#fff;font-size:14px">电话录音下载</span>
                    <Table :columns="phoneRecordColumns" :data="phoneRecordData" border>
                      <template slot-scope="{ row }" slot="audio">
                        <div @click="playOrPause(row)">
                          <Icon class="playBtn" v-if="row.handleplayOrPause" type="ios-pause"/>
                          <Icon class="playBtn" v-else type="ios-play" />
                        </div>
                      </template>
                      <template slot-scope="{row}" slot="opration">
                        {{row.opration}}
                        <Button type="success" size="small" style="border-radius:12px;padding-left:20px;padding-right:20px;" @click="downloadPhoneRecord(row)">下载</Button>
                      </template>
                    </Table>
                    <Button type="primary" @click="modalVisibleChange3" style="float:right;margin-top:20px">返回</Button>
                    <div class="clearBoth"></div>
                  </Modal>
                  <Button v-if="item.notedetail" type="success" size="small" class="waiqin" @click="messageContentShow(item)">短信内容</Button>
                  <Modal transfer footer-hide="true" :value="messageContent" :mask-closable="false" :closable="false" width="703" :styles="{top: '200px'}">
                    <span slot="header" style="color:#fff;font-size:14px">短信内容</span>
                    <Table :columns="messageContentColumns" :data="messageContentData" border></Table>
                    <Button type="primary" @click="modalVisibleChange4" style="float:right;margin-top:20px">返回</Button>
                    <div class="clearBoth"></div>
                  </Modal>
                </div>
                <div class="reasonDetail">
                  <span>
                    <Button v-if="item.facecontent" type="success" size="small" class="waiqin" @click="interviewShow(item)">                  {{
                    item.evaluateflag === "Y"
                      ? "面访联系-评鉴表图片"
                      : "面访联系图片"
                  }}</Button>
                  </span>
                  <span>
                    <Button v-if="item.netcontent" type="success" size="small" class="waiqin" @click="internetShow(item)">网络联系图片</Button>
                  </span>
                </div>
                <!-- 面访联系图片对话框  -->
                <Modal footer-hide="true" :value="interviewModal" :mask-closable="false" :closable="false" width="600" :styles="{top: '200px'}">
                  <span slot="header" style="color:#fff;font-size:14px">面访联系图片</span>
                  <Table :columns="interviewColumns" :data="interviewData" border>
                    <template slot-scope="{ row }" slot="audio">
                      <div @click="showFile(row)">
                        <Icon type="md-image" v-if="row.icon=='image'" style="font-size:20px" />
                        <Icon type="ios-paper" v-if="row.icon=='paper'" style="font-size:20px" />
                      </div>
                    </template>
                    <template slot-scope="{row}" slot="opration">
                      {{row.opration}}
                      <Button type="success" size="small" style="border-radius:12px;padding-left:20px;padding-right:20px;" @click="downloadInterview(row.id)">下载</Button>
                    </template>
                  </Table>
                  <Button type="primary" @click="interviewModal=false" style="float:right;margin-top:20px">返回</Button>
                  <div class="clearBoth"></div>
                </Modal>
                <!-- 网络联系图片 -->
                <Modal transfer footer-hide="true" :value="internetModal" :mask-closable="false" :closable="false" width="600" :styles="{top: '200px'}">
                  <span slot="header" style="color:#fff;font-size:14px">网络联系图片</span>
                  <Table :columns="internetColumns" :data="internetData" border>
                    <template slot-scope="{ row }" slot="audio">
                      <div @click="showFile(row)">
                        <Icon type="md-image" v-if="row.icon=='image'" style="font-size:20px" />
                        <Icon type="ios-paper" v-if="row.icon=='paper'" style="font-size:20px" />
                      </div>
                    </template>
                    <template slot-scope="{row}" slot="opration">
                      {{row.opration}}
                      <Button type="success" size="small" style="border-radius:12px;padding-left:20px;padding-right:20px;" @click="downloadInternet(row.id)">下载</Button>
                    </template>
                  </Table>
                  <Button type="primary" @click="internetModal=false" style="float:right;margin-top:20px">返回</Button>
                  <div class="clearBoth"></div>
                </Modal>
                <!-- 通知业务员 -->
                <div class="reasonDetail" v-if="item.uerMessageToAgentVOS && item.uerMessageToAgentVOS.length>0">
                  <span>通知业务员：</span>
                </div>
                <div class="reasonDetail" v-if="item.uerMessageToAgentVOS && item.uerMessageToAgentVOS.length>0" style="margin-left:10px;">
                  <div v-for="temp in item.uerMessageToAgentVOS" :key="temp">
                    <Row style="margin-bottom:10px;">
                      <i-col style="color:rgba(128, 128, 128, 1);">{{temp.senddate}} {{temp.sendcontent}}</i-col>
                    </Row>
                  </div>
                </div>
                <div class="reasonDetail">
                  <div v-for="( ti,index) in item.professionalCommentVOS" :key="index">
                    <span>{{ti.commentname}}点评：</span>
                    <Rate v-model="ti.level" disabled />
                    <span class="gray">{{ti.comment}}</span>
                    <span style="margin:0 10px;">{{ti.createTime}}</span>
                    <Button type="error" class="waiqin" @click="delRate(ti.id)">删除</Button>
                  </div>
                </div>
                <Row gutter="10" v-if="item.agenttype != '1'">
                  <i-col span="21">
                    <i-input v-model="item.rateAdvice" placeholder="请输入点评内容">
                      <span slot="prepend">
                        <Rate clearable v-model="item.userRate" />
                      </span>
                    </i-input>
                  </i-col>
                  <i-col span="3">
                    <Button type="primary" @click="submitRate(item)">提交</Button>
                  </i-col>
                </Row>
              </div>
              <div class="modalContent modalContent-self" v-else>
                <div class="reasonDetail">
                  <i-col span="4">
                    <span>处理人：</span>
                    <span>{{ item.customerserviceno ? item.customerserviceno : "" }}</span>
                    <Button type="primary" ghost size="small" class="waiqin">
                      <span style="font-size: 12px">客服</span>
                    </Button>
                  </i-col>
                </div>
                <div class="reasonDetail">
                  <i-col span="4">
                    <span>回访结果：</span>
                    <span>{{ item.visitresult ? item.visitresult : "" }}</span>
                  </i-col>
                </div>
                <div class="reasonDetail">
                  <i-col span="4">
                    <span>原因：</span>
                    <span>{{ item.reason ? item.reason : "" }}</span>
                  </i-col>
                </div>
                <div class="reasonDetail">
                  <i-col span="4">
                    <span>备注：</span>
                    <span>{{ item.remark ? item.remark : "" }}</span>
                  </i-col>
                </div>
                <div class="reasonDetail">
                  <Button v-if="item.url" type="success" size="small" class="waiqin" @click="showphoneCCRecord(item)">电话录音</Button>
                  <Modal footer-hide="true" :value="phoneCCRecord" :mask-closable="false" :closable="false" width="400" :styles="{top: '200px'}">
                    <span slot="header" style="color:#fff;font-size:14px">电话录音下载</span>
                    <Table :columns="phoneCCRecordColumns" :data="phoneCCRecordList" border>
                      <template slot-scope="{ row }" slot="audio">
                        <div @click="playOrPause(row)">
                          <Icon class="playBtn" v-if="row.handleplayOrPause" type="ios-pause"/>
                          <Icon class="playBtn" v-else type="ios-play" />
                        </div>
                      </template>
                      <template slot-scope="{row}" slot="opration">
                        {{row.opration}}
                        <Button type="success" size="small" style="border-radius:12px;padding-left:20px;padding-right:20px;" @click="downloadCCPhoneRecord(row.url)">下载</Button>
                      </template>
                    </Table>
                    <Button type="primary" @click="modalVisibleChange3" style="float:right;margin-top:20px">返回</Button>
                    <div class="clearBoth"></div>
                  </Modal>
                </div>
              </div>
            </TimelineItem>
            <div v-if="serviceRecord2 && serviceRecord2.length !==0 && (index === (serviceRecord1.length - 1))">
              <TimelineItem v-for="(item, index) in serviceRecord2[0].payFinishVOS" :key="index" :color="item.finishstate==='交费完成'?'green':'red'">
                <span class="time mr20">{{item.finishstate}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.lastpaytodate}}</span>
                <span class="conLabel" v-if="assignmentInfo.insuranceType == 'invalid'">应交次数：</span>
                <span class="conLabel" v-else>已交次数：</span>
                <span class="content">{{item.paycount+'/'+item.payyears+''+item.payintvname}}</span>
              </TimelineItem>
            </div>
          </Timeline>
        </div>
        <div v-else>
          <Timeline>
            <TimelineItem v-for="(item,index) in serviceRecord" :key="index">
              <div class="modalTitle">
                <Row gutter="10">
                  <i-col span="6">
                    <span>工作日期：</span>
                    <span>{{item.updateTime?item.updateTime:''}}</span>
                  </i-col>
                  <i-col span="5">
                    <span class="conLabel" v-if="assignmentInfo.insuranceType == 'invalid'">应交次数：</span>
                    <span class="conLabel" v-else-if="item.infoType">交费期次：</span>
                    <span class="conLabel" v-else>已交次数：</span>
                    <span class="gray">{{item.payyear?item.payyear+"/":''}}{{item.payyears?item.payyears:''}}{{item.payintv?item.payintv:''}}</span>
                  </i-col>
                  <i-col span="5">
                    <span>工作方式：</span>
                    <span class="gray">{{item.worktype?item.worktype:''}}</span>
                  </i-col>
                </Row>
              </div>
              <div class="modalContent modalContent-self" v-if="!item.infoType">
                <Row gutter="5">
                  <i-col span="4">
                    <span>处理人：</span>
                    <span>{{item.workname?item.workname:''}}</span>
                    <Button type="default" size="small" class="waiqin">
                      <span style="font-size:12px">{{item.role}}</span>
                    </Button>
                  </i-col>
                  <i-col span="4">
                    <span>收费状态预估：</span>
                    <span class="gray">{{item.estimatestate==='0'?'可回收':item.estimatestate==='1'?'收费困难':item.estimatestate==='2'?'不可回收':''}}</span>
                  </i-col>
                  <i-col span="4">
                    <span>预估交费难度：</span>
                    <span class="gray">{{item.difficulty?item.difficulty+'级':''}}</span>
                  </i-col>
                  <i-col span="4">
                    <span>交费时间预估：</span>
                    <!-- <span class="gray" v-if="item.estimatedate">{{item.estimatedate.substr(0,10)}}</span> -->
                    <span class="gray">{{item.estimatedate?item.estimatedate.substr(0,10):''}}</span>
                  </i-col>
                  <i-col span="4">
                    <span>是否联系成功：</span>
                    <span class="gray">{{item.linksuccessflag==="0"?'是':'否'}}</span>
                  </i-col>
                  <i-col span="4">
                    <span>主管陪访：</span>
                    <span class="gray">{{item.orderwith?item.orderwith:'否'}}</span>
                  </i-col>
                </Row>
                <div class="reasonDetail">
                  <span>未收原因说明</span>
                  <span v-for="(t2,index) in item.reasonByCompany" :key="index">
                    <Button size="small" class="reasonBtn">{{t2}}</Button>
                  </span>
                  <span v-for="(t3,index) in item.reasonByCustomer" :key="index">
                    <Button size="small" class="reasonBtn">{{t3}}</Button>
                  </span>
                  <span v-if="item.reasonByother">
                    <Button size="small" class="reasonBtn">{{item.reasonByother}}</Button>
                  </span>
                </div>
                <div class="reasonDetail">
                  <span>工作结果记录</span>
                  <span v-for="(t2,index) in item.workresultid" :key="index">
                    <Button size="small" class="reasonBtn">{{t2}}</Button>
                  </span>
                  <!-- <span v-if="item.workresultid">
                    <Button size="small" class="reasonBtn">{{item.workresultid}}</Button>
                  </span>-->
                </div>
                <div class="reasonDetail">
                  <!-- <span class="gray" v-if="item.linksuccessflag==='0'">{{item.workresult}}</span> -->
                  <span class="gray">{{item.workresult}}</span>
                </div>
                <div class="reasonDetail">
                  <span>实时扣款：{{item.paystate}}</span>
                </div>
                <div class="reasonDetail">
                  <Button v-if="item.recordingaddress" type="success" size="small" class="waiqin" @click="phoneRecordShow(item)">电话录音</Button>
                  <Modal footer-hide="true" :value="phoneRecord" :mask-closable="false" :closable="false" width="600" :styles="{top: '200px'}">
                    <span slot="header" style="color:#fff;font-size:14px">电话录音下载</span>
                    <Table :columns="phoneRecordColumns" :data="phoneRecordData" border>
                      <template slot-scope="{ row }" slot="audio">
                        <div @click="playOrPause(row)">
                          <Icon class="playBtn" v-if="row.handleplayOrPause" type="ios-pause"/>
                          <Icon class="playBtn" v-else type="ios-play" />
                        </div>
                      </template>
                      <template slot-scope="{row}" slot="opration">
                        {{row.opration}}
                        <Button type="success" size="small" style="border-radius:12px;padding-left:20px;padding-right:20px;" @click="downloadPhoneRecord(row)">下载</Button>
                      </template>
                    </Table>
                    <Button type="primary" @click="modalVisibleChange3" style="float:right;margin-top:20px">返回</Button>
                    <div class="clearBoth"></div>
                  </Modal>
                  <Button v-if="item.notedetail" type="success" size="small" class="waiqin" @click="messageContentShow(item)">短信内容</Button>
                  <Modal transfer footer-hide="true" :value="messageContent" :mask-closable="false" :closable="false" width="703" :styles="{top: '200px'}">
                    <span slot="header" style="color:#fff;font-size:14px">短信内容</span>
                    <Table :columns="messageContentColumns" :data="messageContentData" border></Table>
                    <Button type="primary" @click="modalVisibleChange4" style="float:right;margin-top:20px">返回</Button>
                    <div class="clearBoth"></div>
                  </Modal>
                </div>
                <div class="reasonDetail">
                  <span>
                    <Button v-if="item.facecontent" type="success" size="small" class="waiqin" @click="interviewShow(item)">                  {{
                    item.evaluateflag === "Y"
                      ? "面访联系-评鉴表图片"
                      : "面访联系图片"
                  }}</Button>
                  </span>
                  <span>
                    <Button v-if="item.netcontent" type="success" size="small" class="waiqin" @click="internetShow(item)">网络联系图片</Button>
                  </span>
                </div>
                <!-- 面访联系图片对话框  -->
                <Modal footer-hide="true" :value="interviewModal" :mask-closable="false" :closable="false" width="600" :styles="{top: '200px'}">
                  <span slot="header" style="color:#fff;font-size:14px">面访联系图片</span>
                  <Table :columns="interviewColumns" :data="interviewData" border>
                    <template slot-scope="{ row }" slot="audio">
                      <div @click="showFile(row)">
                        <Icon type="md-image" v-if="row.icon=='image'" style="font-size:20px" />
                        <Icon type="ios-paper" v-if="row.icon=='paper'" style="font-size:20px" />
                      </div>
                    </template>
                    <template slot-scope="{row}" slot="opration">
                      {{row.opration}}
                      <Button type="success" size="small" style="border-radius:12px;padding-left:20px;padding-right:20px;" @click="downloadInterview(row.id)">下载</Button>
                    </template>
                  </Table>
                  <Button type="primary" @click="interviewModal=false" style="float:right;margin-top:20px">返回</Button>
                  <div class="clearBoth"></div>
                </Modal>
                <!-- 网络联系图片 -->
                <Modal transfer footer-hide="true" :value="internetModal" :mask-closable="false" :closable="false" width="600" :styles="{top: '200px'}">
                  <span slot="header" style="color:#fff;font-size:14px">网络联系图片</span>
                  <Table :columns="internetColumns" :data="internetData" border>
                    <template slot-scope="{ row }" slot="audio">
                      <div @click="showFile(row)">
                        <Icon type="md-image" v-if="row.icon=='image'" style="font-size:20px" />
                        <Icon type="ios-paper" v-if="row.icon=='paper'" style="font-size:20px" />
                      </div>
                    </template>
                    <template slot-scope="{row}" slot="opration">
                      {{row.opration}}
                      <Button type="success" size="small" style="border-radius:12px;padding-left:20px;padding-right:20px;" @click="downloadInternet(row.id)">下载</Button>
                    </template>
                  </Table>
                  <Button type="primary" @click="internetModal=false" style="float:right;margin-top:20px">返回</Button>
                  <div class="clearBoth"></div>
                </Modal>
                <!-- 通知业务员 -->
                <div class="reasonDetail" v-if="item.uerMessageToAgentVOS && item.uerMessageToAgentVOS.length>0">
                  <span>通知业务员：</span>
                </div>
                <div class="reasonDetail" v-if="item.uerMessageToAgentVOS && item.uerMessageToAgentVOS.length>0" style="margin-left:10px;">
                  <div v-for="temp in item.uerMessageToAgentVOS" :key="temp">
                    <Row style="margin-bottom:10px;">
                      <i-col style="color:rgba(128, 128, 128, 1);">{{temp.senddate}} {{temp.sendcontent}}</i-col>
                    </Row>
                  </div>
                </div>
                <div class="reasonDetail">
                  <div v-for="( ti,index) in item.professionalCommentVOS" :key="index">
                    <span>{{ti.commentname}}点评：</span>
                    <Rate v-model="ti.level" disabled />
                    <span class="gray">{{ti.comment}}</span>
                    <span style="margin:0 10px">{{ti.createTime}}</span>
                    <Button type="error" class="waiqin" @click="delRate(ti.id)">删除</Button>
                  </div>
                </div>
                <Row gutter="10" v-if="item.agenttype != '1'">
                  <i-col span="21">
                    <i-input v-model="item.rateAdvice" placeholder="请输入点评内容">
                      <span slot="prepend">
                        <Rate clearable v-model="item.userRate" />
                      </span>
                    </i-input>
                  </i-col>
                  <i-col span="3">
                    <Button type="primary" @click="submitRate(item)">提交</Button>
                  </i-col>
                </Row>
              </div>
              <div class="modalContent modalContent-self" v-else>
                <div class="reasonDetail">
                  <i-col span="4">
                    <span>处理人：</span>
                    <span>{{ item.customerserviceno ? item.customerserviceno : "" }}</span>
                    <Button type="primary" ghost size="small" class="waiqin">
                      <span style="font-size: 12px">客服</span>
                    </Button>
                  </i-col>
                </div>
                <div class="reasonDetail">
                  <i-col span="4">
                    <span>回访结果：</span>
                    <span>{{ item.visitresult ? item.visitresult : "" }}</span>
                  </i-col>
                </div>
                <div class="reasonDetail">
                  <i-col span="4">
                    <span>原因：</span>
                    <span>{{ item.reason ? item.reason : "" }}</span>
                  </i-col>
                </div>
                <div class="reasonDetail">
                  <i-col span="4">
                    <span>备注：</span>
                    <span>{{ item.remark ? item.remark : "" }}</span>
                  </i-col>
                </div>
                <div class="reasonDetail">
                  <Button v-if="item.url" type="success" size="small" class="waiqin" @click="phoneCCRecord=true">电话录音</Button>
                  <Modal footer-hide="true" :value="phoneCCRecord" :mask-closable="false" :closable="false" width="400" :styles="{top: '200px'}">
                    <span slot="header" style="color:#fff;font-size:14px">电话录音下载</span>
                    <Table :columns="phoneCCRecordColumns" :data="item.url" border>
                      <template slot-scope="{ row }" slot="audio">
                        <div @click="playOrPause(row)">
                          <Icon class="playBtn" v-if="row.handleplayOrPause" type="ios-pause"/>
                          <Icon class="playBtn" v-else type="ios-play" />
                        </div>
                      </template>
                      <template slot-scope="{row}" slot="opration">
                        {{row.opration}}
                        <Button type="success" size="small" style="border-radius:12px;padding-left:20px;padding-right:20px;" @click="downloadCCPhoneRecord(row.url)">下载</Button>
                      </template>
                    </Table>
                    <Button type="primary" @click="modalVisibleChange3" style="float:right;margin-top:20px">返回</Button>
                    <div class="clearBoth"></div>
                  </Modal>
                </div>
              </div>
            </TimelineItem>
            <div v-if="serviceRecord && serviceRecord.length !==0">
              <TimelineItem v-for="(item,index) in serviceRecord[0].payFinishVOS" :key="index" :color="item.finishstate==='交费完成'?'green':'red'">
                <span class="time mr20">{{item.finishstate}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.lastpaytodate}}</span>
                <span class="conLabel" v-if="assignmentInfo.insuranceType == 'invalid'">应交次数：</span>
                <span class="conLabel" v-else>已交次数：</span>
                <span class="content">{{item.paycount+'/'+item.payyears+''+item.payintvname}}</span>
              </TimelineItem>
            </div>
          </Timeline>
        </div>
      </div>
    </Card>
    <Card style="margin-top:20px" v-else>
      <div style="font-weight:bold;font-size:16px">沟通记录</div>
      <div class="problemContent">
        <div v-for="(item,index) in basicInformation.recorddetail.recordVOS" :key="item.index" class="problem">
          <div style="color:#000">{{index + 1 + '、'}}</div>
          <div class="content">
            <div class="pro">
                <div>
                  <span style="font-weight:bold;color:#000">问题：</span><span>{{ item.problem }}</span>
                </div>
                <span class="time">{{item.sendTime}}</span>
              </div>
              <div class="pro" v-show="item.replay">
                <div>
                  <span style="font-weight:bold;color:#000">回复：</span><span>{{ item.replay }}</span>
                </div>
                <span class="time">{{item.replayTime}}</span>
              </div>
          </div>
        </div>
      </div>
    </Card>
    <div class="contain" ref="mybox" style="width:0;hieght:0;overflow:hidden">
      <canvas id="myCanvas" width="200" height="100" ref="myCanvas"></canvas>
    </div>
    <!-- 显示图片 -->
    <Modal
      footer-hide="true"
      v-model="handleShowFile"
      width="1200px"
      title="在线预览"
    >
      <img style="width:100%;height:100%" :src="biggerPath" alt="" title="如需下载请右击" />
    </Modal>
    <!-- 险种信息弹窗 -->
    <Modal v-model="riskinfoModal" :mask-closable="false" footer-hide="true" title="险种信息" width="600px">
      <Table :columns="riskinfoColumns" :data="data1">
        <template slot-scope="{ row }" slot="file">
          <Icon type="ios-paper" @click="prviewDoc(row)" style="font-size: 20px" />
        </template>
        <template slot-scope="{ row }" slot="opration">
          <Button type="success" size="small" @click="downloadPDF(row)">下载</Button>
        </template>
      </Table>
      <Row style="margin-top:20px">
        <i-col span="2" offset="20">
          <Button type="primary" @click="riskinfoModal = false" >返回</Button>
        </i-col>
      </Row>
    </Modal>
  </div>
</template>

<script>
import {drawSign} from '../../../util/drawSign';
import {exportFile,visitFile} from "../../../util/util"
export default {
  data() {
    return {
      tabList:[],
      row: this.$route.query.row,
      phoneRecord: false,
      phoneCCRecord:false,
      messageContent: false,
      interviewModal: false,
      internetModal: false,
      // 上半部分数据
      basicInformation: {
        showbaseflag: '',
        showpayflag: '',
        agentdetail: null,
        contdetail: null,
        customerdetail: null,
        workdetailValueMapsVO: null,
        sendmessagetips: null,
        recorddetail:{
          recordVOS:[]
        }
      },
      basicInformation1: null,
      // 下半部分数据
      serviceRecord: null,
      // 交办件数据
      assignmentInfo: '',
      // 电话录音表格
      phoneRecordColumns: [
        {
          title: '时间',
          key: 'createTime',
          width: '180'
        },
        {
          title: "文件",
          key: "src",
          width: "80",
          slot: "audio"
        },
        {
          title: '名称',
          key: 'recordingaddress',
          width: '180'
        },
        {
          title: '操作',
          key: 'opration',
          slot: 'opration'
        }
      ],
      // cc电话录音
      phoneCCRecordColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "200",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      phoneRecordData: [
        {
          time: '2019-11-11 08:22:22',
          name: '电话录音文件1'
        }
      ],
      // 短信表格
      messageContentColumns: [
        {
          title: '发送时间',
          key: 'createTime',
          width: '180'
        },
        {
          title: '发送对象',
          key: 'persionid',
          width: '100'
        },
        {
          title: '发送内容',
          key: 'messagecontent'
        }
      ],
      messageContentData: [
        {
          sendTime: '2019-11-11 08:22:22',
          sendPerson: '张宁',
          sendContent:
            '粘稠度】标签说明每天更新标签，截止至昨天最新数据【交费习惯】标签说明每年1.1号对所有续期用户进行标签更新，计算前两年内续期保单交费时间所在宽限期天数，默认为“一般”，若其他条件，则显示标签中最重要的。显示顺序为拖沓＞及时＞准时忙碌时间段】标签说明每年1.1号对所有续期用户进行标签更新，计算前两年内专员录入“未拨通”、“客户挂断电话”情况，对应所在时间段'
        }
      ],
      // 面访联系表格
      interviewColumns: [
        {
          title: '时间',
          key: 'createTime',
          width: '180'
        },
        {
          title: "文件",
          key: "src",
          width: "80",
          slot: "audio"
        },
        {
          title: '名称',
          key: 'path',
          width: '180'
        },
        {
          title: '操作',
          key: 'opration',
          slot: 'opration'
        }
      ],
      interviewData: [
        {
          time: '2019-11-11 08:22:22',
          name: '电话录音文件1'
        }
      ],
      // 网络联系表格
      internetColumns: [
        {
          title: '时间',
          key: 'createTime',
          width: '180'
        },
        {
          title: "文件",
          key: "src",
          width: "80",
          slot: "audio"
        },
        {
          title: '名称',
          key: 'path',
          width: '180'
        },
        {
          title: '操作',
          key: 'opration',
          slot: 'opration'
        }
      ],
      internetData: [
        {
          time: '2019-11-11 08:22:22',
          name: '电话录音文件1'
        }
      ],
      // 星级记录
      RateList: [
        {
          name: '吴晗',
          rateValue: '2',
          advice: '继续努力',
          index: '1'
        },
        {
          name: '吴是',
          rateValue: '3',
          advice: '继续努力',
          index: '2'
        }
      ],
      // 未收原因说明
      notReceiveReasonList: [
        {
          reason: '业务员投保'
        },
        {
          reason: '家庭原因'
        }
      ],
      // 工作结果
      workResultList: [
        {
          workResult: '客户明确不交费'
        },
        {
          workResult: '家庭原因'
        }
      ],
      contactList: [
        {
          contactType: '电话联系',
          contactImage: '图片.jpg'
        },
        {
          contactType: '面访联系',
          contactImage: '图片.jpg'
        }
      ],
      rateValue: 0,
      rateAdvice: '',
      payWay: true,
      // 保单查询进入服务详情的服务记录
      serviceRecord1: null,
      recordType:'U享',
      kg: "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",
      phoneCCRecordList:[],
      handleplayOrPause:false,
      handleShowFile:false,
      biggerPath:'',
      audioUrl:new Audio(),
      audioid:'',
      riskinfoModal: false,
      riskinfoColumns: [
        {
          title: '文件',
          align: 'center',
          key: 'file',
          width: '100',
          slot: "file",
        },
        {
          title: '名称',
          align: 'center',
          key: 'name'
        },
        {
          title: "操作",
          key: "opration",
          align: 'center',
          slot: "opration",
        },
      ],
      data1: [],
    }
  },
  filters:{
    filterdate:function(e){
      if(e){
        return e.slice(0,10)
      }
    }
  },
  methods: {
    riskinfoModalShow(e){
      this.riskinfoModal = true
      this.data1 = e
    },
    prviewDoc(row){
      if(row.type=='1'){
        window.open(row.url);
      }else{
        let obj = {
          id:row.updateId
        }
        exportFile("scrm-gateway/scrm-uer/api/fileDownload/download", obj);
      }
    },
    downloadPDF(row) {
        let obj = {
          id:row.updateId
        }
        exportFile("scrm-gateway/scrm-uer/api/fileDownload/download", obj);
    },
    // 显示图片
    showFile(row){
      if (row.ext=='jpg' || row.ext=='png' || row.ext=='jpeg') {
        this.biggerPath = row.photoUrl
        this.handleShowFile = true
      }else if(row.ext=='pdf'){
        let type = row.photoUrl.split('type=')[1]
        let obj = {
          id:row.id,
          worktype: type
        }
        visitFile("scrm-uer/api/fileDownload/downloadWork", obj);
      }else{
        this.$Message.info("该文件不支持在线预览，请下载到本地后打开")
      }
    },
    //播放完毕执行
    overAudio(){
      console.log('播放声音完毕');
      let arr = this.phoneRecordData
      this.phoneRecordData = []
      arr.forEach(item=>{
        if (this.audioid == item.id) {
          item.handleplayOrPause = false
        }
        this.phoneRecordData.push(item)
      })
    },
    //播放
    playOrPause(data) {
      let arr = this.phoneRecordData
      this.phoneRecordData = []
      arr.forEach(item=>{
        if (data.id == item.id) {
          if (!item.handleplayOrPause) {
            this.audioUrl.src = item.photoUrl
            this.audioid = data.id
            this.audioUrl.play()
            item.handleplayOrPause = true
            this.audioUrl.onended = ()=>{
              this.overAudio()
            }
          }else{
            this.audioUrl.pause()
            item.handleplayOrPause = false
          }
        }else{
          item.handleplayOrPause = false
        }
        this.phoneRecordData.push(item)
      })
    },
    // 电话录音对话框点击显示
    async phoneRecordShow({ plainid, workid }) {
      let res = await this.api.recordingInfo({
        plainid,
        workid
      })
      this.phoneRecordData = res.data
      this.phoneRecordData.forEach(item=>{
        item.handleplayOrPause = false
      })
      // console.log(res.data);
      this.phoneRecord = true
    },
    showphoneCCRecord(item){
      console.log(item);
      this.phoneCCRecordList = item.url
      this.phoneCCRecord = true
    },
    // 对话框关闭
    modalVisibleChange3() {
      this.phoneRecord = false
      this.audioUrl.pause()
      this.phoneCCRecord = false
    },
    // 短信内容对话框点击显示
    async messageContentShow({ plainid, workid }) {
      let res = await this.api.smsData({
        plainid,
        workid
      })
      this.messageContentData = res.data
      console.log(res.data)
      this.messageContent = true
    },
    // 对话框关闭
    modalVisibleChange4() {
      this.messageContent = false
    },
    // 面访对话框显示
    async interviewShow({ plainid, workid }) {
      let res = await this.api.interviewPicturesInfo({
        plainid,
        workid
      })
      this.interviewData = res.data
      this.interviewData.forEach((item,index)=>{
        let arr = item.path.split('.');
        let ext = arr[arr.length-1];
        item.ext = ext
        if(ext=='jpg'||ext=='png'||ext=='jpeg'){
          item.icon = 'image'
        }else{
          item.icon = 'paper'
        }
      })
      this.interviewModal = true
    },
    // 网络对话框
    async internetShow({ plainid, workid }) {
      let res = await this.api.internetPicturesInfo({
        plainid,
        workid
      })
      this.internetData = res.data
      this.internetData.forEach((item,index)=>{
        let arr = item.path.split('.');
        let ext = arr[arr.length-1];
        item.ext = ext
        if(ext=='jpg'||ext=='png'||ext=='jpeg'){
          item.icon = 'image'
        }else{
          item.icon = 'paper'
        }
      })
      this.internetModal = true
    },
    // 星级改变
    rateChange(value) {
      // console.log(value, this.row);
    },
    variable() {
      // console.log(this.row,'111')
      if (this.$route.query.row.payintvname === '趸交') {
        this.payWay = false
      }
    },
    // 获取问题件详情
    async getProblemInfo({problemFileId,contno}){
      let res = await this.api.getProblemFileWorkDetail({
        problemFileId,
        contno,
      })
      this.$set(this, 'basicInformation', res.data)
      this.basicInformation.agentdetail.agentstate = this.basicInformation.agentdetail.agentState;
      this.basicInformation.agentdetail.managecom = this.basicInformation.agentdetail.manageCom;
      this.basicInformation.agentdetail.managecomname = this.basicInformation.agentdetail.manageComName;
      this.$Loading.finish()
    },
    // 获取页面数据
    async getBasicStatisticsInfo({
      planid,
      agentcode,
      contno,
      reagentcode,
      paytodate
    }) {
      // console.log(planid, agentcode);
      this.contno = contno
      // 三个信息
      let res = await this.api.workStatusBasicStatisticsInfo({
        planid: planid || '',
        agentcode,
        contno,
        visitType: 0,
        reagentcode: reagentcode || ''
      })
      // 续期专员信息
      let res1 = await this.api.workStatusBasicStatisticsInfo1({ reagentcode })
      // 服务记录
      let res2 = await this.api.workStatusServiceRecord({
        planid,
        contno,
        paytodate
      })
      let CCrecord = [];
      $.ajax("scrm-gateway/scrm-uer/api/ccRecord/selectCCRecord/" + contno, {
          method: "get",
          contentType: "application/json;charset=utf-8",
          headers: {
            Authorization: sessionStorage.getItem("credentials")
          },
          success: res => {
            if (res.code == 200 && res.data != null) {
              CCrecord = res.data
              console.log(CCrecord,'CCrecord');
              if (CCrecord.length!=0) {
                CCrecord.forEach((item,index)=>{
                  item.updateTime = item.subtime;
                  item.worktype = "客服电话联系客户";
                  item.infoType = 'CC';
                  item.payyear = String(this.$route.query.row.payyear)
                  item.payyears = this.$route.query.row.payyears
                  item.payintv = this.$route.query.row.payintvname
                  res2.data.push(item)
                })
                res2.data.sort(function(a, b) {
                    return b.updateTime < a.updateTime ? -1 : 1
                })
                this.$set(this, 'serviceRecord', res2.data)
              }
            } else {
              CCrecord = [];
              this.$set(this, 'serviceRecord', res2.data)
            }
          },
          error: res => {
            this.$Message.error(res.msg);
          }
      });
      
      console.log(res2.data,'res2.data');
      // this.basicInformation = res.data;
      this.$set(this, 'basicInformation', res.data)
      // this.basicInformation1 = res1.data;
      this.$set(this, 'basicInformation1', res1.data)
      // this.serviceRecord = res2.data;
      // alert("工作录入基础信息：" + this.basicInformation.agentdetail.name + ",续期专员信息：" + this.basicInformation1.name);
      // console.log("历史服务记录：",this.serviceRecord);
      // console.log(this.serviceRecord[0].workresult);
      this.$Loading.finish()
    },
    // 添加评价
    async submitRate(item) {
      console.log(item);
      let { workid, plainid, userRate, rateAdvice } = item
      let res = await this.api.sublimeRate({
        workid,
        planid: plainid,
        level: userRate,
        comment: rateAdvice
      })
      if (res.code === 200) {
        this.$Message.success('评论信息提交成功！')
        this.getBasicStatisticsInfo(this.$route.query.row)
        ;(item.userRate = ''), (item.rateAdvice = '')

        //2020-12-15 用于触发弹窗
        this.api.sendNotice({
          agentcode:this.basicInformation1.reagentcode,
          messageid:this.row.contno,
          messagetype:0,
        }).then(res => {
          console.log(res)
        })

        this.api.pushOneUser({
            agentCode: this.basicInformation1.reagentcode,
            templateType: "1",
            planid: plainid,
            workid: workid,
        }).then(res => {
          console.log(res)
        })
      }
    },
    // 删除评价
    async delRate(id) {
      let res = await this.api.deleteRate({ id })
      if (res.code === 200) {
        this.$Message.success('删除成功！')
        this.getBasicStatisticsInfo(this.$route.query.row)
      } else {
        this.$Message.info('不支持删除其他用户的评论')
      }
    },
    downloadCCPhoneRecord(url){
      window.open(url)
    },
    downloadPhoneRecord(row) {
      let obj = {
        id:row.id,
        worktype:"phone"
      }
      // window.open(
      //   `../rest/fileDownload/downloadWork?id=${row.id}&&worktype=phone`
      // )
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork",obj)
    },
    downloadInterview(id) {
      let obj = {
        id,
        worktype:"interview"
      }
      // window.open(
      //   `../rest/fileDownload/downloadWork?id=${id}&&worktype=interview`
      // )
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork",obj)
    },
    downloadInternet(id) {
      let obj = {
        id,
        worktype:"net"
      }
      // window.open(`../rest/fileDownload/downloadWork?id=${id}&&worktype=net`)
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork",obj)
    },
    // 查询不同位置的基础信息
    async getSelectBaseInformation({ contno }) {
      // console.log(contno, "222");
      this.contno = contno;
      let res = await this.api.selectBaseInformation({ contno })
      let res1 = await this.api.selectreagentInformation({ contno })
      this.basicInformation = res.data
      // this.$set(this,'basicInformation', res.data);
      this.basicInformation1 = res1.data
      // this.$set(this,'basicInformation1', res1.data);
      // console.log(this.basicInformation);
      // console.log(this.basicInformation1);
    },
    // 查询下半部分信息
    async getBottomInfo({ contno }) {
      let res = await this.api.selectallworkdetail({ contno })
      let CCrecord = [];
      $.ajax("scrm-gateway/scrm-uer/api/ccRecord/selectCCRecord/" + contno, {
          method: "get",
          contentType: "application/json;charset=utf-8",
          headers: {
            Authorization: sessionStorage.getItem("credentials")
          },
          success: data => {
            if (data.code == 200 && data.data != null) {
              CCrecord = data.data
              console.log(this.$route.query.row,'CCrecord');
              if (CCrecord.length!=0) {
                let arr = res.data ? res.data.allProfessionalWorkdetail : [[]]
                CCrecord.forEach((item,index)=>{
                  item.updateTime = item.subtime;
                  item.worktype = "客服电话联系客户";
                  item.infoType = 'CC'
                  item.payyear = String(this.$route.query.row.payyear)
                  item.payyears = this.$route.query.row.payyears
                  item.payintv = this.$route.query.row.payintvname
                  console.log(res.data);
                  if(res.data){
                    arr[0].push(item)
                    arr[0].sort(function(a, b) {
                        return b.updateTime < a.updateTime ? -1 : 1
                    })
                    this.$set( this, 'serviceRecord1',arr)
                  }else{
                    console.log('1365');
                    arr[0].push(item)
                    console.log(arr);
                    this.$set( this, 'serviceRecord1',arr)
                  }
                })
              }
            } else {
              CCrecord = [
                {
                  customerserviceno:'123456',
                }
              ];
              this.$set(
                this,
                'serviceRecord1',
                res.data ? res.data.allProfessionalWorkdetail : []
              )
            }
          },
          error: res => {
            this.$Message.error(res.msg);
          }
      });
      // this.serviceRecord1 = res.data?res.data.allProfessionalWorkdetail:[];
      
      // console.log("服务信息："+this.serviceRecord1);
    },
    //多保单查询
    queryRelateCont() {
      this.tabList.push(this.$route.query.row)
      this.contno = this.$route.query.row.contno
      let params = {
        appntno:this.$route.query.row.appntno,
        contno:this.$route.query.row.contno,
      }
      this.api.queryRelateCont(params).then(res => {
        if (res.code == 200 && res.data != null) {
          // console.log(res)
          this.tabList = this.tabList.concat(res.data)
          console.log(this.tabList)
        } else {
          this.$Message.info(res.msg)
        }
      })
    },

    //切换标签页
    reSearch(name) {
      this.assignmentInfo = this.tabList[name]
      if(name==0){
        this.assignmentInfo = this.$route.query
        // console.log("路由跳转过来的参数：",this.$route.query);
        if (this.$route.query.type === 'policyEnquiry') {
          if (this.$route.query.row.payintvname === '趸交') {
            // console.log("期交");
            this.getSelectBaseInformation(this.$route.query.row)
          } else {
            // console.log("趸交");
            this.getSelectBaseInformation(this.$route.query.row)
            this.getBottomInfo(this.$route.query.row)
          }
        }else if (this.$route.query.insuranceType === 'problem'){
          this.getProblemInfo(this.$route.query.row)
        } else {
          this.getBasicStatisticsInfo(this.$route.query.row)
        }
      }else{
        if (this.tabList[name].type === 'policyEnquiry') {
          if (this.tabList[name].payintvname === '趸交') {
            // console.log("期交");
            this.getSelectBaseInformation(this.tabList[name])
          } else {
            // console.log("趸交");
            this.getSelectBaseInformation(this.tabList[name])
            this.getBottomInfo(this.tabList[name])
          }
        }else if (this.$route.query.insuranceType === 'problem'){
          this.getProblemInfo(this.tabList[name])
        } else {
          this.getBasicStatisticsInfo(this.tabList[name])
        }
      }
    },
    async changeTab(name){
      console.log(name)
      this.$Loading.start()
      await this.reSearch(name)
      // this.$Loading.finish()
    },
    draw(ele,loginUser,loginTime) {
      let imageUrl = drawSign(ele,loginUser,loginTime)
      console.log("imageUrl",imageUrl)
      document.getElementsByClassName("ivu-card-body")[0].style.background = 'url(' + imageUrl + ') left top repeat'
    },
  },
  mounted() {
    this.variable()

    let loginUser = sessionStorage.getItem("name");
    let loginTime =
    new Date().getFullYear() +
    "/" +
    (new Date().getMonth() + 1) +
    "/" +
    (new Date().getDate());
    this.draw(this.$refs.myCanvas,loginUser,loginTime)
  },
  created() {
    this.queryRelateCont();
    this.assignmentInfo = this.$route.query
    // console.log("路由跳转过来的参数：",this.$route.query);
    if (this.$route.query.type === 'policyEnquiry') {
      if (this.$route.query.row.payintvname === '趸交') {
        // console.log("期交");
        this.getSelectBaseInformation(this.$route.query.row)
      } else {
        // console.log("趸交");
        this.getSelectBaseInformation(this.$route.query.row)
        this.getBottomInfo(this.$route.query.row)
      }
    } else if (this.$route.query.insuranceType === 'problem'){
      this.getProblemInfo(this.$route.query.row)
    }else {
      this.getBasicStatisticsInfo(this.$route.query.row)
    }
  },
  beforeDestroy() {
    this.phoneRecordData = null
  }
}
</script>
<style scoped lang="less">
.modalContent-self>div{
  float: none !important;
}
.assignment-header {
  color: rgba(24, 144, 255, 1);
  margin: 5px 0;
  font-size: 16px;
  font-weight: 600;
}
.mr20 {
  margin-right: 20px;
}
@import './index';
</style>

<style>
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}
.ivu-input-group-prepend {
  background-color: #fff;
}
</style>
